<template>
    <div class="gal-item-root">
        <div class="gal-item-title">{{ curData.name }}</div>
        <div class="gal-item-tag">
            <div v-if="curData.isCN == 1 || curData.isCN == 2" class="green"></div>
            <div v-else-if="curData.isCN == 4 || curData.isCN == 5 || curData.isCN == 6" class="yellow"></div>
            <div v-else class="red"></div>
            <div :class="curData.bug ? 'red' : 'green'"></div>
            <div :class="curData.isCG == 0 ? 'red' : 'green'"></div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    curData: Object,
})


</script>
<style scoped lang="scss">
.gal-item-root {
    box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin: 10px;
    border-radius: 0 6px 6px 6px;
    display: grid;
    grid-template-columns: 1fr 100px;

    .gal-item-title {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .gal-item-tag {
        display: flex;
        justify-content: space-between;
        width: 70%;


        >div {
            width: 20px;
            height: 20px;
            border-radius: 5px;
        }

        .red {
            background-color: #FF466B;
        }

        .green {
            background-color: #6BFF74;
        }

        .yellow {
            background-color: #e6a23c;
        }

    }
}
</style>